<template id="f7-weather">
  <span v-html="message"></span>
</template>
<script>
import Util from "../framework/util";
export default {
  data: function() {
    return {
      message: ""
    };
  },
  props: {
    province: {
      type: String,
      default: "广东省"
    },
    city: {
      type: String,
      default: "广州市"
    },
    weatherType: {
      type: String,
      default: "observe" //observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise|air
    },
    format: {
      type: String,
      default: "{city} {observe.weather} {observe.degree}"
    }
  },
  created() {
    this.$f7.request({
      dataType: "json",
      url: "http://wis.qq.com/weather/common",
      data: {
        source: "xw",
        weather_type: this.weatherType,
        province: this.province,
        city: this.city,
        callback: "r230"
      },
      crossDomain: true,
      success: e => {
        this.message = Util.parse(this.format, {
          province: this.province,
          city: this.city,
          icon:
            "<img class='weather-icon' src='https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/" +
            e.data.observe.weather_code +
            ".png'/>",
          ...e.data
        });
      }
    });
  }
};
</script>
<style scoped>
span >>> .weather-icon {
  width: 15px;
  height: 15px;
}
</style>
